Variables Figma

公式

手順

Accent colorやinteraction stateとか。

primaryやhoverとか

利用する時は、Assetsから利用する。

その他Tips

Valueの２個めの使い所

Modeで分ける？: DarkModeとか。

感想

renameを手軽にできるのが良い。

実装視点でrenameしたい時に手軽にrenameしやすい。

Variableの命名方針はエンジニアの方が、普段から命名している分知見あるので、共有していきたいね。

colorとか分かりやすいんだけど、Booleanとかちょっとデザイン的に新しい概念は使い方を明示すると良さそう。

OK: hasIconとか、

No: disabled(stateやinteractionとかでいい。)、SizeでisMobileとか(3つめのサイズ出てきた時に破堤する)

そんなに、既に作らているcomponentをVariable化するの大変でなかったので、エンジニアがやってあげても良いかもしれない。

component化、Variable化されていなかったら、要件整理や実装時にエンジニアはせざるを得ないので、それならエンジニアがやってもいいかな〜と思った。

エンジニア視点で、Figmaと実装にズレが生じる場合、エンジニアが直した方が早いみたいなことは発生するはず。

疑問

Variable関係ない修正がcomponent全体にあった時ってどうなるんだろう。

icon-buttonにバリエーションが4つあって、前提の長さやspacingが変わると、4つ共変える必要ある？

触った感じありそう。

Default componentを参照とかできると良いんだけど。。

読んだ

具体的な利用例がイメージしやすい。

導入して半年の知見なので、参考になる。

エンジニアでもあるので、エンジニア視点もありがたい。

なぜVariantを使うかの言語化ありがたい。

導入当初の記事

短い動画が間にたくさんあるので、操作がわかりやすい

実際、自分はこれ見ながら、試しに作った。

記事がわかり易かったので、他も見よう。